<div class="wrapper">
  @if (projectMetricsService.simpleMetrics(); as sm) {
    <section
      class="basic-stats"
      [@fade]
    >
      <div class="metrics-header">
        <h1 class="mat-h1">
          {{ T.PM.TITLE | translate }}
        </h1>
        <share-button
          [payload]="sharePayload()"
          [tooltip]="'Share your productivity stats'"
        />
      </div>
      <!--  <h2>Basic Metrics</h2>-->
      <p>
        <i>{{ sm.start }} – {{ sm.end }}</i>
      </p>
      <div class="material-table">
        <table>
          <tr>
            <th>{{ T.F.METRIC.CMP.TIME_SPENT | translate }}</th>
            <td>{{ sm.timeSpent | msToString }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.TIME_ESTIMATED | translate }}</th>
            <td>{{ sm.timeEstimate | msToString }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.TASKS_DONE_CREATED | translate }}</th>
            <td>{{ sm.nrOfCompletedTasks }} / {{ sm.nrOfAllTasks }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.DAYS_WORKED | translate }}</th>
            <td>{{ sm.daysWorked }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_TASKS_PER_DAY_WORKED | translate }}</th>
            <td>{{ sm.avgTasksPerDay | number: '1.0-1' }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_BREAKS_PER_DAY | translate }}</th>
            <td>{{ sm.avgBreakNr | number: '1.0-1' }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_TIME_SPENT_PER_DAY | translate }}</th>
            <td>{{ sm.avgTimeSpentOnDay | msToString }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_TIME_SPENT_PER_TASK | translate }}</th>
            <td>{{ sm.avgTimeSpentOnTask | msToString }}</td>
          </tr>
          <tr>
            <th>
              {{ T.F.METRIC.CMP.AVG_TIME_SPENT_PER_TASK | translate }}
              <br />{{ T.F.METRIC.CMP.COUNTING_SUBTASKS | translate }}
            </th>
            <td>{{ sm.avgTimeSpentOnTaskIncludingSubTasks | msToString }}</td>
          </tr>
          <tr>
            <th>{{ T.F.METRIC.CMP.AVG_TIME_SPENT_ON_BREAKS | translate }}</th>
            <td>{{ sm.avgBreakTime | msToString }}</td>
          </tr>
        </table>
      </div>
    </section>
  }

  <section style="max-width: 880px; margin: auto; margin-top: 32px">
    <activity-heatmap></activity-heatmap>
  </section>

  @if (!metricService.hasData()) {
    <p style="margin-top: 32px">
      {{ T.F.METRIC.CMP.NO_ADDITIONAL_DATA_YET | translate }}
    </p>
  }
  @if (metricService.hasData()) {
    <section class="metric-metrics">
      <h1>{{ T.F.METRIC.CMP.GLOBAL_METRICS | translate }}</h1>
      <section class="line-charts">
        @if (productivityBreakdownChartData(); as breakdownChart) {
          @if (breakdownChart) {
            <section>
              <h3>{{ T.F.METRIC.CMP.PRODUCTIVITY_BREAKDOWN_OVER_TIME | translate }}</h3>
              <lazy-chart
                [type]="lineChartType"
                [datasets]="breakdownChart.datasets"
                [labels]="breakdownChart.labels"
                [legend]="true"
                [options]="lineChartOptions"
                height="400px"
                [shareFileName]="'productivity-sustainability-breakdown.png'"
                [enableTimeframeSelector]="true"
              >
              </lazy-chart>
            </section>
          }
        }
        @if (focusSessionData(); as focusSessions) {
          @if (focusSessions.labels?.length) {
            <section>
              <h3>{{ T.F.METRIC.CMP.FOCUS_SESSION_TRENDS | translate }}</h3>
              <lazy-chart
                [type]="lineChartType"
                [datasets]="focusSessions.datasets"
                [labels]="focusSessions.labels"
                [legend]="true"
                [options]="lineChartOptions"
                height="400px"
                [shareFileName]="'focus-session-trends.png'"
                [enableTimeframeSelector]="true"
              ></lazy-chart>
            </section>
          }
        }
      </section>
    </section>
  }
  @if (metricService.hasData()) {
    <section class="metric-metrics">
      <h2>{{ T.F.METRIC.CMP.SIMPLE_COUNTERS | translate }}</h2>
      <section class="line-charts">
        @if (simpleClickCounterData(); as simpleCounterClickData) {
          <section>
            <h3>{{ T.F.METRIC.CMP.SIMPLE_CLICK_COUNTERS_OVER_TIME | translate }}</h3>
            <lazy-chart
              [type]="lineChartType"
              [datasets]="simpleCounterClickData.datasets"
              [labels]="simpleCounterClickData.labels"
              [options]="lineChartOptions"
              [legend]="true"
              height="400px"
              [shareFileName]="'simple-click-counters-over-time.png'"
              [enableTimeframeSelector]="true"
            >
            </lazy-chart>
          </section>
        }
        @if (simpleCounterStopWatchData(); as simpleCounterStopWatchData) {
          <section>
            <h3>{{ T.F.METRIC.CMP.SIMPLE_STOPWATCH_COUNTERS_OVER_TIME | translate }}</h3>
            <lazy-chart
              [type]="lineChartType"
              [datasets]="simpleCounterStopWatchData.datasets"
              [labels]="simpleCounterStopWatchData.labels"
              [options]="lineChartOptions"
              [legend]="true"
              height="400px"
              [shareFileName]="'simple-stopwatch-counters-over-time.png'"
              [enableTimeframeSelector]="true"
            >
            </lazy-chart>
          </section>
        }
      </section>
    </section>
  }
</div>
